<template>
<!-- 收付费作业-出盘锁查询页面 -->
<div class="fillcontain" id="selloutLockQuery">
    
    <!-- CYQ:20200117-收付费作业-出盘锁查询(多条件) -->
    <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="80px" class="search_container">
        <el-row>
            <el-col :span="24">
                <!-- CYQ:20200117-收付费作业-出盘锁维护-条件区域选择 -->
                <el-col :span="1"  class="pt10 text_right">
                    <el-radio-group v-model="selectType" @change="selectTypeChange">
                    <el-radio :label="'2'">&nbsp;</el-radio>
                    </el-radio-group>
                </el-col>

                <el-col :span="23" >

                    <el-col :span="6">
                        <el-form-item label="出盘类型" prop="platType">
                            <el-select v-model="searchParams.platType" placeholder="请选择" :disabled="selectType =='1'">
                                <el-option v-for="item in platTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="锁类型" prop="lockType" >
                            <el-select v-model="searchParams.lockType" placeholder="请选择" :disabled="selectType == '1'">
                                <el-option v-for="item in lockTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="6">
                        <el-form-item label="锁单时间" prop="startTimeAndenderTime">
                            <el-date-picker
                            v-model="searchParams.startTimeAndenderTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" :disabled="selectType == '1'">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-col>

            </el-col>
            <el-col :span="24">
                <!-- CYQ:20200117-收付费作业-出盘锁查询-单选 -->
                <el-col :span="1" class="pt10 text_right">
                    <el-radio-group v-model="selectType" @change="selectTypeChange">
                        <el-radio :label="'1'">&nbsp;</el-radio>
                    </el-radio-group>
                </el-col>

                <el-col :span="23">
                    <el-col :span="6">
                        <el-form-item label="保单号码" prop="chdrNum">
                            <el-input v-model="searchParams.chdrNum" placeholder="请输入" :disabled="selectType == '2'" :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="6">
                        <el-form-item label="受理号" prop="applNum">
                            <el-input v-model="searchParams.applNum" placeholder="请输入" :disabled="selectType == '2'" :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="text_center">
                        <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                        <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                    </el-col>
                </el-col>
            </el-col>
        </el-row>
    </el-form>



    <div class="contain">
        <div class="table_container">
          <el-table v-loading="loading" :data="tableData" highlight-current-row header-cell-class-name="table-header-class" style="width:100%">
            <el-table-column
                min-width="120"
                property="chdrNum"
                label="保单号码"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="platType"
                label="出盘类型"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="applNum"
                label="受理号"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="customName"
                label="客户姓名"
                align='center'
                show-overflow-tooltip>
            </el-table-column> 

            <el-table-column
                min-width="120"
                property="bankAccount"
                label="账号"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="orginAmount"
                label="金额"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="tradeStatus"
                label="状态"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <!-- CYQ:20200117-收付费作业-出盘锁维护-添加锁状态转化 -->
            <el-table-column
                min-width="120"
                property="lockStatus"
                label="锁状态"
                align='center'
                show-overflow-tooltip :formatter="lockStatusInfo">
            </el-table-column>

            <el-table-column 
                min-width="120"
                property="updateUser"
                label="经办人"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

             <el-table-column 
                min-width="120"
                 property="updateDate"
                label="处理时间"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                min-width="120"
                property="firstOutPaltDate"
                label="首次出盘日"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

             <el-table-column 
                min-width="120"
                property="transferDateLine"
                label="转账截止日"
                align='center'
                show-overflow-tooltip>
            </el-table-column>

          </el-table>
          <!-- CYQ:20200117-收付费作业-分页 -->
          <el-row>
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                        background
                        v-if='paginations.total > 0'
                        :page-sizes="paginations.pageSizes"
                        :page-size="paginations.pageSize"
                        :layout="paginations.layout"
                        :total="paginations.total"
                        :current-page='paginations.pageIndex'
                        @current-change='handleCurrentChange'
                        @size-change='handleSizeChange'>
                    </el-pagination>
                </div>
            </el-col>
          </el-row>
        </div>
    </div>
</div>
</template>

<script>
import { findSellOutLockListByParams } from '@/api/selloutLock/selloutlock';
import { mapState, mapGetters } from 'vuex'
import constant from '@/utils/constant';
import { isIP } from 'net';
import moment,{ invalid } from 'moment';//CYQ:20200217-收付费作业-出盘锁查询-引入复杂业务时间格式
export default {
    data(){
        return {
            selectType: '1',//CYQ:20200117-收付费作业-出盘锁查询
            startTimeAndenderTime:'',
            // 查询条件
            rules:{
                applNum:[],
                chdrNum:[],
            },
            searchParams:{
                lockType  :'', //锁类型
                applNum   :'', //客户号
                chdrNum   :'', //客户姓名
                platType  :'', //出盘类型
                startTimeAndenderTime: [moment(new Date()).format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')],//锁单时间(起始日期-截止日期)
            },
            tableData: [],
            loading:false,
            //需要给分页组件传的信息
            paginations: {
                total: 0,        // 总数
                pageIndex: 1,  // 当前位于哪页
                pageSize: 10,   // 1页显示多少条
                pageSizes: [5, 10, 15, 20],  //每页显示多少条
                layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
            },
            pickerOptions1: {
                disabledDate(time) {
                return time.getTime() > Date.now();
                }
            },
            platTypeOptions:[{label:'首期保费',value:'首期保费'},{label:'AIC保费',value:'AIC保费'}],
            platType: '',//CYQ:20200117-收付费作业-出盘锁查询-下拉选择框
            lockTypeOptions:[{label:'手工',value:'M'},{label:'系统',value:'S'}],
            lockType: ''//CYQ:20200117-收付费作业-出盘锁查询-下拉选择框
        }
    },

    created(){
//          this.getList();
    },
    mounted(){
        // this.getList();
    },
    methods: {

        //CYQ:20200117-收付费作业-出盘锁查询-清空另外条件框的内容
        selectTypeChange(){
            if(this.selectType =='1'){   
                this.searchParams.platType ='';
                this.searchParams.lockType ='';
                this.searchParams.startTimeAndenderTime='';
            }else if(this.selectType == '2'){
                this.searchParams.chdrNum    = '';
                this.searchParams.applNum    = '';
                this.searchParams.startTimeAndenderTime = [moment(new Date()).format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')];
            }
        },

        //CYQ:20200117-收付费作业-出盘锁查询-锁状态字段转化
        lockStatusInfo(row){
            if(row.lockStatus == 'N'){
                return "未加锁";
            }
            else if(row.lockStatus == 'Y'){
                return "已加锁";
            }else{
                return '未知';
            }
        },


        // 查询列表
        getList(){
            this.paginations.total=0;
            this.tableData=[];
            let params = {
                "applNum"   : this.searchParams.applNum,
                "chdrNum"   : this.searchParams.chdrNum,
                "pageNumber": this.paginations.pageIndex,
                "pageSize"  : this.paginations.pageSize,
                "pageNumber": this.paginations.pageIndex,
                "platType"  : this.searchParams.platType,
                "clockType" : this.searchParams.lockType,
                "selectType": this.selectType,
                "startTime" : this.searchParams.startTimeAndenderTime[0]==''?'':moment(this.searchParams.startTimeAndenderTime[0]).format('YYYYMMDD'),
                "enderTime" : this.searchParams.startTimeAndenderTime[1]==''?'':moment(this.searchParams.startTimeAndenderTime[1]).format('YYYYMMDD'),
                "orderBy"   : "",
            }

            console.log("数据:"+JSON.stringify(params));
            //CYQ:20200117-收付费作业-出盘查询-查询模式
            if(params.selectType == null || params.selectType == ''){
                this.$message({
                    message: '请选择一种查询模式!',
                    type: 'error'
                });
                return false;
            }

           
            //模式一
            if(this.selectType == '1' && (params.applNum == null || params.applNum == '')  && (params.chdrNum == '' || params.chdrNum == null)){
                this.$message({
                    message: '请至少输入一个查询条件来执行查询!',
                    type: 'error'
                });
                return false;
            }


            //模式二- 验证
            if(this.selectType == '2' && params.platType ==''){
                this.$message({
                    message: '出盘类型不能为空!',
                    type: 'error'
                });
                return false;
            }

            //模式二-时间提示
            if(this.selectType == '2' && (params.startTime ==''|| params.enderTime=='')){
                this.$message({
                    message: '锁单时间不能为空!',
                    type: 'error'
                });
                return false;
            }

            //限制为数字，如果是空为false，非数字为true
            if(this.selectType == '1'){

                if(params.applNum!='' && isNaN(params.applNum)){
                    this.$message({
                        message: '受理号必须为数字!',
                        type: 'error'
                    });
                    return false;
                }
                if(params.chdrNum!='' && isNaN(params.chdrNum)){
                    this.$message({
                        message: '保单号必须为数字!',
                        type: 'error'
                    });
                    return false;
                }
                    

            }

            //查询
            this.$store.dispatch('loading/CHANGE_LOADING',true)
            findSellOutLockListByParams(params).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING',false)
                console.log(res);
                if(res.resultCode == '0'){
                    this.paginations.total = res.data.total;
                    this.tableData = res.data.list;
                    // this.$message({
                    //     message: '查询成功!',
                    //     type: 'success'
                    // });
                } else{
                //    this.$message({
                //         message: '保单号必须为数字!',
                //         type: 'error'
                //     });
                //     return false;
                //  this.$message({
                //                 message: res.resultMsg,
                //                 type: 'error'
                //             });
                }        
            }).catch(err =>{
                this.$store.dispatch('loading/CHANGE_LOADING',false);
            })
            
        },

        // 每页多少条切换
        handleSizeChange(pageSize) {
            this.paginations.pageSize = pageSize;
            this.getList();
        },
        // 上下分页
        handleCurrentChange(page) {
            this.paginations.pageIndex = page;
            this.getList();
        },
        // 根据条件查询列表
        subGetList(){
            this.paginations.pageIndex=1;
            this.getList();
        },
        // 清除查询条件
        resetSearch(){
            this.searchParams.chdrNum    = '';
            this.searchParams.applNum    = '';
            this.searchParams.platType ='';
            this.searchParams.lockType ='';
            this.searchParams.startTimeAndenderTime =['',''];
        }
    },
    computed:{
        ...mapGetters(['tags']),
        reload(){
            return this.$store.state.loading.reload;
        }
    },
    activated(){
        if(this.reload){
            this.$store.dispatch('loading/CHNAGE_RELOAD',false)
            Object.assign(this.$data, this.$options.data());
        }
    }
}
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
   }
</style>
<style>
   #selloutLockQuery .is-disabled.el-input .el-input__inner{
       color:#c0c4cc !important;   
    }  
</style>



